<template>
  <div>
    <!-- 点击node节点,才加载子节点的时候，需设置 :lazy="true" -->
    <el-tree
      class="_tree"
      :data="treeList"
      :props="defaultProps"
      @node-expand="handleNodeExpand"
      @node-click="handleNodeClick"
      :default-expanded-keys="expandedKeys"
      :node-key="nodeKey"
      :highlight-current="true"
      ref="comnTree"
    >
      <template #default="{ data }">
        <span class="custom-tree-node">
          <i :class="data.icon ? data.icon : 'el-icon-folder-opened'"></i>
          <span class="tree_label">{{ data.label }}</span>
          <span
            class="tree_label"
            v-if="data.total || data.total === 0"
            title="数量"
            >({{ data.total }})</span
          >
        </span>
      </template>
    </el-tree>
  </div>
</template>
<script>
export default {
  props: {
    treeList: {
      type: Array
    },
    defaultProps: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "name"
          // isLeaf: "leaf" //需要加叶子节点的页面
        };
      }
    },
    nodeKey: {
      // 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的
      type: String,
      default() {
        return "menuId";
      }
    },
    treeWidth: {
      type: Number,
      default() {
        return 237;
      }
    },
    expandedKeys: {
      // 默认展开的树节点，ids
      type: Array,
      default() {
        return [];
      }
    }
  },
  emits: ['handleNodeExpand', 'handleNodeClick'],
  setup(props, context) {
    console.log(props.treeList);
    const handleNodeExpand = (data) => {
      context.emit("handleNodeExpand", data);
    };

    const handleNodeClick = (data) => {
      context.emit("handleNodeClick", data);
    }

    return {
      handleNodeExpand,
      handleNodeClick
    }
  },
}
</script>